<template>
  <div class="right-setting">
    <!-- logo导航区 -->
    <!-- <div class="page-logo">
      <div class="title">logo导航区</div>
      <el-form-item label="logo导航区">
        <el-select v-model="logoShow" @change="changeLogoShow">
          <el-option v-for="item in logoShowOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </div> -->
    <!-- 页眉图片 -->
    <div class="page-header">
      <div class="title">页眉图片</div>
      <div>
        <img :src="formAppearanceInfo.headerImg" alt="" v-if="formAppearanceInfo.headerImg">
        <el-popover placement="bottom" :width="568" trigger="hover" :show-after="200" v-else>
            <template #reference>
                <div class="upload-bgImg">
                    <el-icon><Plus /></el-icon>添加图片
                </div>
            </template>
            <img-select :setType="'header'" @changeImg="changeImg" v-model:uploadDialog="uploadDialog" v-model:uploadType="uploadType"></img-select>
        </el-popover>
      </div>
      <div class="btns" v-if="formAppearanceInfo.headerImg">
        <el-popover placement="bottom" :width="568" trigger="hover" :show-after="200">
            <template #reference>
                <span><i class="iconfont">&#xe675;</i>更换</span>
            </template>
            <img-select :setType="'header'" @changeImg="changeImg" v-model:uploadDialog="uploadDialog" v-model:uploadType="uploadType"></img-select>
        </el-popover>
        <span @click="delHeaderImg">
          <i class="iconfont">&#xe74b;</i>移除
        </span>
      </div>
    </div>
    <!-- 背景图片 -->
    <div class="page-backImg">
      <div class="title">背景图片</div>
      <div class="btn-group">
        <el-button-group>
          <el-button :type="currentBgType === 'color' ? 'primary':''" @click="changeBtn('color')">纯色</el-button>
          <el-button :type="currentBgType === 'img' ? 'primary':''" @click="changeBtn('img')">图片</el-button>
        </el-button-group>
      </div>
      <div class="background-panel">
        <div v-if="currentBgType === 'color'" class="color-panel">
            <color-select :setType="'background'" @changeColor="changeColor" />
        </div>
        <div v-else class="img-panel">
          <div class="img-box">
            <img :src="formAppearanceInfo.backgroundImg" alt="" v-if="formAppearanceInfo.backgroundImg">
            <el-popover placement="bottom" :width="568" trigger="hover" :show-after="200" v-else>
              <template #reference>
                  <div class="upload-bgImg">
                      <el-icon><Plus /></el-icon>添加图片
                  </div>
              </template>
              <img-select :setType="'background'" @changeImg="changeImg" v-model:uploadDialog="uploadDialog" v-model:uploadType="uploadType"></img-select>
            </el-popover>
          </div>
          <div class="img-btns" v-if="formAppearanceInfo.backgroundImg">
            <el-popover placement="bottom" :width="568" trigger="hover" :show-after="200">
                <template #reference>
                    <span>
                    <i class="iconfont">&#xe675;</i>更换
                    </span>
                </template>
                <img-select :setType="'background'" @changeImg="changeImg" v-model:uploadDialog="uploadDialog" v-model:uploadType="uploadType"></img-select>
            </el-popover>
            <span @click="delBackgroundImg">
              <i class="iconfont">&#xe74b;</i>移除
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 问卷配色 -->
    <div class="page-color">
        <div class="title">问卷配色</div>
        <color-select :setType="'theme'" @changeColor="changeColor" />
    </div>
    <div class="bottom-btns no-border">
        <el-button type="" @click="reset">恢复至原先外观</el-button>
        <el-button type="" @click="dialogShow = true">保存为我的外观</el-button>
    </div>
    <!-- 保存我的外观方案名称 -->
    <el-dialog
      v-model="dialogShow"
      title="保存为我的外观"
      width="30%"
      align-center
    >
      <el-form :model="formAppearanceInfo" label-width="100px" ref="myForm">
        <el-form-item label="外观名称：" required>
          <el-input placeholder="请输入名称" v-model="formAppearanceInfo.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="savAppearance" :disabled="!formAppearanceInfo.name || formAppearanceInfo.name == ''">
          确认
        </el-button>
      </span>
    </template>
    </el-dialog>
    <ImageUpload v-model:showDialog="uploadDialog" :limit="1"  @getImage="uploadImage"></ImageUpload>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from "vue";
import colorSelect from './colorSelect.vue'
import imgSelect from './imgSelect.vue'
import { Plus } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import { saveMyAppearance } from "@/api/formDesign";
import {ElMessage} from 'element-plus'
import { getSiteInfo } from "@/utils/storage"

const props = defineProps({
  currentResource: {
    type: Number
  },

})
const emits = defineEmits(['refreshAppearance'])
const store = useStore();
const defaultAppearanceInfo = ref({
  name: '',
  showLogo: false,//logo导航区展示
  logoImg: getSiteInfo() ? getSiteInfo().logo : null,
  headerImg: null,//页眉图片地址
  backgroundType: 'color',//表单背景类型
  backgroundColor: '',//表单背景颜色
  backgroundImg: null,//表单背景图片
  themeColor: '',//表单组件主题色
});
const formAppearanceInfo = ref(Object.assign({},defaultAppearanceInfo.value));

//logo导航区
const logoShow = ref(formAppearanceInfo.value.showLogo)
// const logoShowOptions = ref([
//   { label: '显示', value: true },
//   { label: '隐藏', value: false }
// ])
// const changeLogoShow = (val) => {
//   formAppearanceInfo.value.showLogo = val
// }
//图片移除
const delHeaderImg = () => {
  formAppearanceInfo.value.headerImg = null
}
const delBackgroundImg = () => {
  formAppearanceInfo.value.backgroundImg = null
}
//背景类型按钮组切换
const currentBgType = ref(formAppearanceInfo.value.backgroundType)
const changeBtn = (type) => {
  currentBgType.value = type
}
//页眉图片和背景图片切换
const changeImg = (setType,url) => {
  if(setType === 'background'){
    formAppearanceInfo.value.backgroundType = 'img'
    formAppearanceInfo.value.backgroundImg = url
    formAppearanceInfo.value.backgroundColor = ''
  }
  if(setType === 'header'){
    formAppearanceInfo.value.headerImg = url
  }
}
//图片上传
const uploadDialog = ref(false)
const uploadType = ref()
const uploadImage = (imgList) => {
  let url
  if(imgList.length > 0){
    url = imgList[0].url
  }
  changeImg(uploadType.value,url)
}
//问卷主题配色和背景颜色切换
const changeColor = (setType,color) => {
  if(setType === 'background'){
    formAppearanceInfo.value.backgroundType = 'color'
    formAppearanceInfo.value.backgroundColor = color
    formAppearanceInfo.value.backgroundImg = null
  }
  if(setType === 'theme'){
    formAppearanceInfo.value.themeColor = color
    document.getElementsByTagName('body')[0].style.setProperty('--formTheme', color);
  }
}
//底部操作按钮
const reset = () => {
  if(process.env.NODE_ENV === 'development') console.log(defaultAppearanceInfo.value,666)
  formAppearanceInfo.value = Object.assign({},defaultAppearanceInfo.value)
}
const dialogShow = ref(false)
const cancel = () => {
  dialogShow.value = false
}
const savAppearance = async () => {
  dialogShow.value = false
  //调接口添加
  let res = await saveMyAppearance(formAppearanceInfo.value)
  if(res.code === 20000){
    ElMessage({
      showClose: true,
      message: '保存成功!',
      type: 'success'
    })
    formAppearanceInfo.value.name = ''
    if(props.currentResource === 2){
      emits('refreshAppearance')
    }
  }
}
//联动变化
watch(formAppearanceInfo,() => {
  store.commit('formDesignInfo/SET_APPEARANCEINFO', formAppearanceInfo.value)
},{deep: true})
watch(()=>store.getters.formDesignInfo.formAppearanceInfo,(newVal) => {
  formAppearanceInfo.value = newVal
  logoShow.value = newVal.showLogo
},{deep: true,immediate:true})
</script>

<style lang="scss" scoped>
.right-setting{
    .title{
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
    }
  .page-logo{
    // padding: 20px;
    // border-bottom: 1px solid #DCDFE6;
  }
  .page-header{
    img{
        margin-bottom: 20px;
        width: 100%;
        height: 80px;
        border-radius: 8px;
        overflow: hidden;
    }
    .btns{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #444444;
        span{
            cursor: pointer;
        }
        .iconfont{
            color: #4499FD;
        }
    }
    .upload-bgImg{
      margin-bottom: 20px;
      width: 100%;
      height: 80px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f2f6ff;
      color: #4499fd;
    }
  }
  .page-backImg{
    .btn-group{
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    .background-panel{
        .img-panel{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            .img-box{
              width: 250px;
              img{
                  margin-bottom: 20px;
                  width: 250px;
                  height: 140px;
                  border-radius: 8px;
                  object-fit: cover;
              }
              .upload-bgImg{
                margin-bottom: 20px;
                width: 100%;
                height: 140px;
                border-radius: 8px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #f2f6ff;
                color: #4499fd;
              }
            }
            .img-btns{
                display: flex;
                justify-content: space-between;
                width: 100%;
                font-size: 14px;
                color: #444444;
                span{
                    cursor: pointer;
                }
                .iconfont{
                    color: #4499FD;
                }
            }
        }
    }
  }
  .bottom-btns{
    position: fixed;
    bottom: 50px;
    display: flex;
    justify-content: space-between;
    width: 330px;
    padding: 0 20px;
  }
}
.right-setting > div{
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
}
.right-setting > div:last-child{
    padding: 20px;
    border-bottom: none;
}
.no-border{
  border-bottom: none !important;
}
</style>
